<template>
  <el-card class="title-info">
    <template #header>最近30天人数统计</template>
    <div id="axis" class="axis" />
  </el-card>
</template>

<script setup>
  import * as echarts from 'echarts'
  import { onMounted } from 'vue'
  import { dashboardApi } from '@/api/dashboard'

  let axisRef
  onMounted(async () => {
    if (!axisRef) {
      axisRef = await echarts.init(document.getElementById('axis'))
    }
    await init()
  })

  const init = async () => {
    const data = await dashboardApi.loginStat()
    const option = {
      tip: {
        trigger: 'axis'
      },
      legend: {
        data: ['活跃人数', '新增人数']
      },
      xAxis: {
        type: 'category',
        data: data.dateList
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '活跃人数',
          type: 'line',
          data: data.loginList
        },
        {
          name: '新增人数',
          type: 'line',
          data: data.registerList
        }
      ]
    }
    await axisRef?.setOption(option)
  }
</script>
<style lang="scss" scoped>
  .axis {
    height: 350px;
    margin: 0 auto;
    text-align: center;
  }

  .title-info {
    margin-top: 15px;
  }
</style>
